<template>
	<div class="similation-search-input">
		<label class="placeholder" @click="focus" >{{p}}</label>
		<input 
			type="text" 
			ref="header_input" 
			v-bind:value="value" 
			@focus="getFocus"
			@blur="getBlur"
			@input="updateVal($event.target.value)"/>
		<i class="iconfont icon-sousuo" @click="focus" v-show="icon"></i>
	</div>
</template>

<script>
	export default {
		props: {
			value: String,
			placeholder: String,
			icon: Boolean,
			isfocus: Boolean
		},
		data() {
			return {
				p: this.placeholder
			}
		},
		methods: {
			focus() {
				this.$refs["header_input"].focus();
			},
			updateVal(val) {
				this.$emit("input", val);
			},
			getFocus() {
				this.$emit("focus");
			},
			getBlur() {
				this.$emit("blur");
			}
		},
		watch: {
			value() {
				this.value.length === 0 ? this.p = this.placeholder : this.p = "";
			},
			placeholder() {
				this.p = this.placeholder;
			},
			isfocus() {
				this.$refs["header_input"].focus();
			}
		}
	}
</script>

<style scoped lang="scss">
	.similation-search-input {
		width: 70%;
		margin: 0 auto;
		@include search-input;
	}
</style>